<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>magic box</title>

    <style>
    				*{

    margin: 0;

    padding: 0;

}

table{

    border: 3px solid cornsilk;

    text-align: center;

    font-size: 25px;

    height: 250px;

    width: 250px;

    margin: 20px;

    color: cornsilk;

}

tr{

    border: 3px solid cornsilk;

    width: 60px;

    height: 60px;

}

td{

    border: 3px solid cornsilk;

    width: 60px;

    height: 60px;

    font-weight: bold;

}

body{

    padding: 20px;

    margin: 20px;

    align-items: center;

    text-align: center;

    width: 100%;

    background-color: brown;

}

p{

    letter-spacing: 1px;

    font-size: 18px;

    color:cornsilk;

}

input{

    padding: 10px;

    font-size: 16px;

}

.hidden{

    display: none;

}

#num{

    width: 50%;

    padding: 20px;

}

#button{

  width: 30%;

  padding: 20px;

  font-size: 20px;

}

#ex{

  width: 70%;

  margin: 20px;

  

  font-size: 20px;

}

h1{

  padding: 20px;

  margin: 20px;

  color:cornsilk;

}

#tab{

align-items: center;

align-content: center;

align-self: center;

}

button{

    width: 30%;

    padding: 20px;

    font-size: 20px;

} 
    </style>

  

</head>

<body>

    

    <form>

        <h1>لعبة المربع السحري</h1>

        <input type="number" id="num" placeholder="اكتب رقم بين 20 -100">

        <input type="button" id="button" value="ابهرني!!" onclick="generate_table()">

    </form>

    <input type="button" onclick="explaneButton()" id="ex" value="اظهر شرح اللعبة">

    <div id="explane" class="hidden">

        <p>شاهد الصورة واجمع الاعداد كما يظر لك ,, وسوف تتفاجئ  !! </p>

        <p>مجموع كل صف يساوي الرقم المدخل </p>

        <p>مجموع كل عامود يساوي الرقم المدخل</p>

        <p>مجموع المربعات الاربع في الزواية يظهر نفس الرقم </p>

        <p>مجموع المربعات الاربع في اي جهة (يمنى علوي , يمنى سفلي , يسرى علوي , يسرى سفلي (مجموع اي مجموعة يساوي الرقم المدخل </p>

        <p>مجموع المربعات في الوسط ياوي الرقم المدخل</p>

        <p>مجموع المربعين الوسطيين المتقابلين يساوي الرقم المدخل</p>

        <img src="C:\Users\fadis\Desktop\New folder (3)\لعبة المربع السحري.gif">

    </div>



    <script >
    				function generate_table(){

    var table = document.createElement('table');

    table.id ="tab1";

   

    var x = Number.parseInt(document.getElementById("num").value);

    if (x>20 && x <=100){

        var y = x - 20 ;

        for (var i=0; i<4; i++){

            var tr = document.createElement('tr');



            var t1 = [8,(y-1),3,10]

            var t2 = [11,2,(y+2),5]

            var t3 = [y,7,9,4]

            var t4 = [1,12,6,(y+1)]



            var td1 = document.createElement('td');

            var td2 = document.createElement('td');

            var td3 = document.createElement('td');

            var td4 = document.createElement('td');



            var text1 =document.createTextNode(t1[i]);

            var text2 =document.createTextNode(t2[i]);

            var text3 =document.createTextNode(t3[i]);

            var text4 =document.createTextNode(t4[i]);



            td1.appendChild(text1);

            td2.appendChild(text2);

            td3.appendChild(text3);

            td4.appendChild(text4);

            

            tr.appendChild(td1);

            tr.appendChild(td2);

            tr.appendChild(td3);

            tr.appendChild(td4);



            table.appendChild(tr);



        }

        document.body.appendChild(table);

        

        setGameOver();

    } else {

        alert("رقم خاطئ");

    }

}

function setGameOver(){

    num.disabled = true;

    button.disabled = true;

    restertButton=document.createElement('button');

   

    restertButton.textContent = "ابدا لعبة جديدة";

    document.body.appendChild(restertButton);

    restertButton.addEventListener('click',restartGame);

}

function restartGame(){

    num.disabled = false;

    button.disabled = false;

    num.value="";

    restertButton.parentNode.removeChild(restertButton);

    var tab =document.getElementById("tab1");

    var parentEl = tab.parentElement;

    parentEl.removeChild(tab);

}

function explaneButton(){

    document.querySelector('#explane').classList.toggle('hidden');

    document.querySelector('#num').classList.toggle('hidden');

    document.querySelector('#button').classList.toggle('hidden');

    var g = document.getElementById("ex");

    if(g.value === "اظهر شرح اللعبة"){

        g.value = "اخفي شرح اللعبة";

    } else {

        g.value = "اظهر شرح اللعبة";

    }

    restartGame();

}
    </script>

</body>

</html>